<template>
	<view class="content">
		<view class="selectBox">
			<view class="filterBox" @click="changeFilter">
				<image :src="baseUrl+'/img/juanjiahui/filter.png'" class="filterIcon"></image>
				<text class="filterLabel">筛选评价</text>
				<text class="arrow">></text>
			</view>
			<view class="selectInfoBox" v-if="isFilter">
				<view class="selectInnerBox">
					<view class="timeBox">
						<text class="timeLabel">时间段</text>
						<view class="timeBoxInner">
							<view class="selectItem" :class="timeIndex==index?'avtive':''"
								v-for="(item,index) in timeArr" :key="index" @click="changeTime(index)">
								{{item}}
							</view>
						</view>
					</view>
					<view class="timeBox">
						<text class="timeLabel">评分等级</text>
						<view class="timeBoxInner">
							<view class="selectItem" :class="starIndex==index?'avtive':''"
								v-for="(item,index) in starArr" :key="index" @click="changeStar(index)">
								{{item}}
							</view>
						</view>
					</view>
					<view class="filterBtn" @click="filter">
						筛选
					</view>
				</view>
			</view>
		</view>
		<scroll-view class="commentBox" scroll-y="true" @scrolltolower="getMore()">
			<view class="commentTop">
				<view class="commentLabel">
					评价
				</view>
				<view class="commentTotal">
					（{{comment.count}}条）
				</view>
			</view>
			<view class="commentItem" v-for="(item,index) in comment.data" :key="index">
				<view class="userInfoBox">
					<image :src="item.head" class="avatar"></image>
					<text class="name ellipsis">{{item.name}}</text>
					<uni-rate disabled="true" :value="item.score" size="18" color="#C4C4C4" activeColor="#000000" class="rate" />
				</view>
				<text class="commentInfo">{{item.content}}</text>
			</view>
			<!-- <view class="noBox" v-else>
				<image :src="baseUrl+'/img/juanjiahui/no.png'" class="no"></image>
				<text class="noLabel">暂无评价</text>
			</view> -->
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				baseUrl: this.$baseUrl,
				id: '',
				timeArr: ['9:00 ~ 12:00', '12:00 ~ 13:00', '14:00 ~ 16:00', '16:00 ~ 18:00'],
				starArr: ['1星', '2星', '3星', '4星', '5星'],
				isComment: true,
				comment: '',
				page: 1,
				isFilter: false,
				time: '',
				star: '',
				timeIndex: -1,
				starIndex: -1
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getData();
		},
		methods: {
			changeTime(index) {
				this.timeIndex = index;
				this.time = this.timeArr[this.timeIndex].replace(/\s/g, '');
			},
			changeStar(index) {
				this.starIndex = index;
				this.star = this.starArr[this.starIndex].charAt(0);
			},
			filter() {
				if (!this.time) {
					return this.$toast('请选择时间');
				}
				if (!this.star) {
					return this.$toast('请选择星级');
				}
				this.page = 1;
				this.$request.get(`venue_evaluation_list?venue_id=${this.id}&score=${this.star}&sub_time=${this.time}`)
					.then(res => { //获取评论
						this.comment = res.data;
						this.changeFilter();
					})
			},
			changeFilter() {
				this.isFilter = !this.isFilter;
				this.timeIndex = -1;
				this.starIndex = -1;
				this.time = '';
				this.star = '';
			},
			getMore() {
				this.page++;
				this.$request.get(`venue_evaluation_list?venue_id=${this.id}&page=${this.page}`).then(res => { //获取评论
					this.comment.data.push(...res.data.data);
				})
			},
			getData() {
				this.$request.get(`venue_evaluation_list?venue_id=${this.id}`).then(res => { //获取评论
					this.comment = res.data;
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.selectBox {
		padding: 35rpx 0rpx 35rpx 0rpx;

		.selectInfoBox {
			width: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.6);
			position: fixed;
			z-index: 10;

			.filterBtn {
				width: 670rpx;
				height: 80rpx;
				border-radius: 2rpx;
				background: #121212;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				letter-spacing: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 40rpx;
				margin-left: 40rpx;
			}

			.selectInnerBox {
				width: 100%;
				border-top: 1rpx solid #121212;
				background-color: #FFFFFF;
				padding-bottom: 70rpx;

				.timeBox {
					margin-top: 50rpx;
					display: flex;
					flex-direction: column;
					margin-left: 40rpx;

					.timeBoxInner {
						display: flex;
						flex-wrap: wrap;
						margin-top: 45rpx;
						// justify-content: space-between;
						gap: 18rpx;

						.selectItem {
							width: 154rpx;
							height: 52rpx;
							border-radius: 2rpx;
							border: 1rpx solid #121212;
							font-weight: 500;
							font-size: 20rpx;
							color: #121212;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-bottom: 20rpx;
							box-sizing: border-box;
						}
					}

					.timeLabel {
						font-weight: 700;
						font-size: 24rpx;
						color: #121212;
					}
				}
			}


		}

		.filterBox {
			display: flex;
			align-items: center;
			width: 670rpx;
			margin-left: 40rpx;
			margin-top: 30rpx;
			margin-bottom: 30rpx;

			.arrow {
				font-size: 26rpx;
				color: #929292;
				transform: rotate(90deg);
				margin-left: auto;
			}

			.filterLabel {
				font-weight: 700;
				font-size: 24rpx;
				color: #121212;
				letter-spacing: 5rpx;
				margin-left: 25rpx;
			}

			.filterIcon {
				width: 23rpx;
				height: 25rpx;
			}
		}
	}

	.avtive {
		background-color: #FF7B6C !important;
		color: #ffffff !important;
		border: none !important;
	}

	.commentBox {
		width: 100%;
		padding-left: 40rpx;
		padding-right: 40rpx;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
		box-sizing: border-box;
		border-top: 25rpx solid #f0f0f0;
		height: 85vh;
		overflow-y: scroll;

		.noBox {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;

			.no {
				width: 54rpx;
				height: 43rpx;
				margin-top: 500rpx;
			}

			.noLabel {
				font-weight: 500;
				font-size: 28rpx;
				color: #8E8E8E;
				margin-top: 60rpx;
				letter-spacing: 5rpx;
			}
		}

		.commentItem {
			display: flex;
			flex-direction: column;
			margin-top: 65rpx;
			padding-bottom: 75rpx;
			border-bottom: 1rpx solid #121212;

			.commentImgBox {
				width: 590rpx;
				margin-left: 80rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				/* 允许换行 */
				margin-top: 40rpx;

				.commentImgItem {
					width: 138rpx;
					height: 138rpx;
					margin-bottom: 10rpx;
					border-radius: 10rpx;
				}
			}

			.commentInfo {
				font-weight: 500;
				width: 590rpx;
				line-height: 48rpx;
				font-size: 24rpx;
				color: #121212;
				letter-spacing: 2rpx;
				margin-left: 80rpx;
			}

			.userInfoBox {
				display: flex;
				align-items: center;

				.rate {
					margin-left: auto;
				}

				.name {
					font-weight: 700;
					width: 400rpx;
					font-size: 24rpx;
					color: #121212;
					margin-left: 35rpx;
				}

				.avatar {
					width: 43rpx;
					height: 43rpx;
				}
			}
		}

		.commentTop {
			display: flex;
			align-items: center;
			padding-bottom: 45rpx;
			border-bottom: 1rpx solid #121212;

			.commentAll {
				font-weight: 500;
				font-size: 24rpx;
				color: #8E8E8E;
				margin-left: auto;
			}

			.commentTotal {
				font-weight: 500;
				font-size: 24rpx;
				color: #121212;
			}

			.commentLabel {
				font-weight: 700;
				font-size: 26rpx;
				color: #121212;
			}
		}
	}

	.content {
		width: 100%;
		height: 100vh;
	}
</style>